<template>
    <div id="student">
        <el-row class="padding-50">
            <el-col :span="24">
                <ul class="list">
                    <img src="@/assets/033.png" style="width: 40px; height: 40px; margin: 13px -15px 0 10px; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none;" />

                    <li class="logo"><span>数据库实验自动判卷系统</span></li>
                    <li @click="exam()"><a href="javascript:;">考试中心</a></li>
                    <li @click="grade()"><a href="javascript:;">考试详情</a></li>
                    <li @click="info()"><a href="javascript:;">个人信息</a></li>
                    <!-- <li><router-link to="/message">交流区</router-link></li> -->

                    <li class="right" @mouseenter="flag = !flag" @mouseleave="flag = !flag">
                        <el-row :gutter="32">
                            <el-col :span="16" style="text-align: left;">
                                <!-- 只在 avatar 存在时显示头像 -->
                                <el-avatar v-if="avatar" shape="square" :size="50" :src="avatar" style="margin: 5px 5px 0 0"></el-avatar>
                            </el-col>
                            <el-col :span="16">
                                <a href="javascript:;" style="font-size: 22px; font-weight: 600"><i class="iconfont icon-Userselect icon"></i>{{ user.userName }}</a>
                                <div class="msg" v-if="flag">
                                    <p @click="info()">修改密码</p>
                                    <p divided @click="logout">
                                        <span style="display:block;">退出</span>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                    </li>
                </ul>
            </el-col>
        </el-row>
        <!--路由区域-->
        <div class="main">
            <router-view></router-view>
        </div>
        <v-footer></v-footer>
    </div>
</template>

<script>
import myFooter from "@/views/TakeExam/myFooter";
import { mapState, mapGetters } from "vuex";

export default {
    components: {
        "v-footer": myFooter,
    },
    data() {
        return {
            flag: false,
            user: {},
        };
    },
    computed: {
        // 使用 Vuex 的 avatar
        ...mapGetters(["avatar"]),
    },
    created() {
        this.userInfo();
    },
    methods: {
        async logout() {
            await this.$store.dispatch('user/logout')
            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
            },
        info() {
            this.$router.push({ path: "/TakeExam/info" });
        },
        grade() {
            this.$router.push({ path: "/TakeExam/stuExam" });
        },
        exam() {
            //跳转考试模式
            this.$router.push({ path: "/TakeExam/stuIndex" });
        },
    }
};
</script>

<style scoped>
.right .icon {
    margin-right: 6px;
}

#student .padding-50 {
    margin: 0 auto;
    padding: 0 50px;
    box-shadow: 0 0 10px 4px rgba(1, 149, 255, 0.1);
    background-color: #fff;
}

.list a {
    text-decoration: none;
    color: #334046;
    font-size: 18px;
}

li {
    list-style: none;
    height: 60px;
    line-height: 60px;
}

#student .list {
    display: flex;
}

#student .list li {
    padding: 0 20px;
    cursor: pointer;
}

#student .list li:hover {
    /* background-color: #0195ff; */
    transition: all 2s ease;
}

#student .list li:hover a {
    color: #0195ff;
}

#student .list .right {
    margin-left: auto;
    position: relative;
}

#student .list li.right :hover a {
    color: #000;
}

#student .list .logo {
    display: flex;
    font-weight: bold;
    color: black;
    font-size: 28px;
}

#student .list .logo i {
    font-size: 50px;
}

.right .msg {
    text-align: center;
    position: absolute;
    top: 60px;
    left: 0px;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    border-bottom: 3px solid #0195ff;
    background-color: #fff;
}

.right .msg p {
    height: 40px;
    line-height: 40px;
    width: 105px;
}

.right .msg p:hover {
    background-color: #0195ff;
}
</style>